<template>
    <inner-layout v-loading="loading">

        <div class="filter-bar clearfix">

            <div class="filter-item">
                <span class="filter-item-title">图表数据源</span>
                <el-select v-model="apiParams.type" placeholder="请选择" @change="filterData">
                    <el-option
                      v-for="item in typeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                </el-select>
            </div>

            <!-- <div class="filter-item">
                <el-button @click="filterData">确定</el-button>
            </div> -->

            <div class="filter-item" v-if="dataList.date.length > 0 && dataList.date.length == dataList.ytm.length">
                <i class="el-icon-info"></i>
                {{ dataList.date[dataList.date.length - 1] }}：YTM={{ (dataList.ytm[dataList.ytm.length - 1] * 1).toFixed(2) }},价格={{ dataList.price[dataList.price.length - 1] }}
            </div>

        </div>

        <div id="chartObj" class="charts-wrap"></div>

        <div class="tip-wrap">
            <div><i class="el-icon-info"></i>16国债19（SH019547）：票面利率：3.27%；每年付息两次（2月23和8月23）；国债到期日为：2046-08-22</div>
            <div class="fr"><a href="https://xueqiu.com/S/SH019547" target="_blank">去雪球查看详情&gt;&gt;</a></div>
        </div>

    </inner-layout>
</template>

<script>
import { getXueqiuSh019547, getXueqiuCookieByCache, getXueqiuSh019547DemoData, getXueqiuSh019547Ytm } from '@/api/xueqiu'
import { parseTime } from '@/utils/index'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
	name: 'Sh019547',
	components: { },
    directives: { },
	mixins: [],
	data() {
		return {
			loading: false,
			dataList: {
                date: [],
                price:[],
                ytm:  [],
            },
            apiParams: {
                type: 'ytm',
            },
            typeList: [
                {code: 'price', name: '价格'},
                {code: 'ytm', name: 'YTM'},
            ],
            chart: null
		}
	},
	created() {
        console.log('getPageData', getXueqiuCookieByCache())
	},
    mounted() {
        setTimeout(() => {
            this.getPageData()
        }, 1500)
    },
    beforeDestroy() {
    	if (!this.chart) {
    		return
    	}
    	this.chart.dispose()
    	this.chart = null
    },
	methods: {
        getPageData() {
            let that = this

            // console.log('getPageData', getXueqiuCookieByCache())
            // return

            if (that.dataList.date.length > 0) {
                that.setOptions()
                return
            }
            getXueqiuSh019547().then(res => {
                let _data = res.data
                if (_data.error_code === 0) {
                    // console.log('getXueqiuSh019547DemoData', _data)
                    let _dateKey = 0
                    let _valKey = 5
                    for (let i in _data.data.column) {
                        if (_data.data.column[i] == 'timestamp') {
                            _dateKey = i * 1
                        } else if (_data.data.column[i] == 'close') {
                            _valKey = i * 1
                        }
                    }
                    // debugger
                    _data.data.item.forEach(row => {
                        // that.originData.push([parseTime(row[_dateKey], '{y}-{m}-{d}'), row[_valKey], getXueqiuSh019547Ytm(row[_dateKey], row[_valKey])])
                        that.dataList.date.push(parseTime(row[_dateKey], '{y}-{m}-{d}'))
                        that.dataList.price.push(row[_valKey])
                        that.dataList.ytm.push(getXueqiuSh019547Ytm(row[_dateKey], row[_valKey]))
                    })
                    // console.log('that.dataList', that.dataList)
                    that.setOptions()
                } else {
                    that.$message.error('[' + _data.error_code + ']' + (_data.error_description || '获取数据失败'))
                }
            })

        },
        filterData() {
            this.getPageData()
        },
        setOptions() {
            let that = this
            if (!that.chart) {
                that.chart = echarts.init(document.getElementById('chartObj'))
            }
            that.chart.setOption({
                title: {
                    show: false
                },
                tooltip: {
                	trigger: 'axis',
                	axisPointer: {
                		type: 'cross'
                	},
                	padding: [5, 10]
                },
                xAxis: {
                    data: that.dataList.date
                },
                yAxis: {
                    scale: true
                },
                series: [
                    {
                        name: that.apiParams.type == 'ytm' ? 'YTM' : '价格',
                        type: 'line',
                        data: that.apiParams.type == 'ytm' ? that.dataList.ytm : that.dataList.price,
                        itemStyle: {
                        	normal: {
                        		color: '#3888fa',
                        		lineStyle: {
                        			color: '#3888fa',
                        			width: 1
                        		}
                        	}
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                ]
            })
        }
	}
}
</script>

<style lang="scss" scoped>
    .filter-item {
        .filter-item-title {
            margin-right: 5px;
        }
        .filter-item-select {
            width: 150px;
        }
    }
    .charts-wrap {
        max-width: 100%;
        height: calc(100vh - 350px);
    }
    .tip-wrap {
        padding: 30px 0;
        font-size: 13px;
        line-height: 26px;
    }
</style>
